<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-date"></i>{{$route.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
                <el-form :model="addForm" :rules="rules" ref="addForm">
                    <el-form-item label="课程名称" :label-width="formLabelWidth" prop="name">
                        <el-input type="text" v-model="addForm.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="发布时间" :label-width="formLabelWidth">
                        <el-date-picker v-model="addForm.publicAt" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <!-- <el-form-item label="发布机构" :label-width="formLabelWidth">
                        <el-select v-model="addForm.publicOrg" placeholder="请选择机构分类">
                            <el-option v-for="(type,index) in organizationTypes" :key="index.id" :label="type.name" :value="type.name"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="所属区域" :label-width="formLabelWidth">
                        <!-- <el-select v-model="addForm.area" placeholder="请选择区域">
                            <el-option v-for="(territory,index) in territorys" :key="index" :label="territory.name" :value="territory.name"></el-option>
                        </el-select> -->
                        <el-input type="text" v-model="addForm.belongArea" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="合作类型" :label-width="formLabelWidth">
                        <el-input type="text" v-model="addForm.corpType" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" :label-width="formLabelWidth">
                        <el-input type="text" v-model="addForm.contactName"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="项目状态" :label-width="formLabelWidth">
                        <el-select v-model="addForm.status" placeholder="请选择项目状态">
                            <el-option v-for="(status,index) in projectStatus" :key="index" :label="status" :value="index+1"></el-option>
                        </el-select> -->
                    </el-form-item>
                    <el-form-item label="课程分类" :label-width="formLabelWidth">
                        <el-select v-model="addForm.course_type_id" placeholder="请选择课程分类">
                            <el-option v-for="(type,index) in types" :key="type.id" :label="type.name" :value="type.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="课程内容" prop="" :label-width="formLabelWidth">
                        <!-- <el-input type="textarea" v-model="addForm.content"></el-input> -->
                        <editor @input="htmlOutput" :htmlContent="addForm.content"></editor>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add">确 定</el-button>
                </div>
            </el-dialog>
            <el-input v-model="select_word" placeholder="输入课程名称" class="search"></el-input>
            <!-- <el-select v-model="organizationType" placeholder="请选择项目类型">
                <el-option v-for="(type,index) in organizationTypes" :key="index" :label="type" :value="index+1"></el-option>
            </el-select> -->
            <!-- <el-date-picker
                v-model="rangeTime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker> -->
            <el-button type="primary" icon="search" @click="search">搜索</el-button>
            <el-button type="primary" @click="addEx">新增课程</el-button>
        </div>
        <div>
            <el-table :data="tableDatas" border fit style="width: 100%">
                <el-table-column prop="name" label="课程名称" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="publicAt" label="发布时间" show-overflow-tooltip :formatter="timeFormatter">
                </el-table-column>
                <el-table-column prop="publicOrg" label="发布机构" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="belongArea" label="所属区域" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="corpType" :formatter="formatArea" label="合作方式" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="contactName" label="联系人" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="course_type_id" label="项目分类" show-overflow-tooltip :formatter="typeFormatter">
                </el-table-column>
                <el-table-column prop="content" label="课程内容" show-overflow-tooltip>
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editOrg(scope.row)" size="small">编辑</el-button>
                        <el-button type="text" @click="delOrg(scope.row)" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination @current-change="handleCurrentChange" 
            :current-page="page.number" layout="total, prev, pager, next, jumper" 
            :total="page.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { course, org } from "../../server/getDate.js";
import { mapState, mapActions } from 'vuex'
import { getStore,  dateFormatter} from '../../utils/local.js'
import { confirm, filterObj } from '../../utils/local'
import Editor from './../../components/common/Editor';
const { typeList, courseList, addCourse, updateCourse, deleteCourse } = course
const allOrg = org.allOrg
export default {
    data() {
        return {
            value: '',
            loading: false,
            dialogFormVisible: false,
            select_word: '',
            rangeTime: '',
            addForm: {},
            formLabelWidth: '120px',
            title: '',
            show: false,
            organizationType: '',
            projectStatus: [
              '未完成',
              '已完成'
            ],
            rules: {
                name: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
            }
        }
    },
    created() {  
        this.getTypeList()
        this.getCourseList(1)
    },
    components: {
        Editor
    },
    computed: mapState({
        page: state => state.Project.coursePage,
        tableDatas: state => state.Project.courseList,
        types: state => state.Project.typeList,
        organizationTypes: state => state.Project.orgList
    }),
    methods: {
        ...mapActions(['saveList', 'saveTypeList', 'saveOrg']),
        search() {
            this.getCourseList(this.page.number)
        },
        htmlOutput(html) {
            this.addForm.content = html
        },
        getOrgs() {
          allOrg().then(res => {
              if (res.code === '000000') {
                  this.saveOrg(res)
              } else {
                  this.$message.error(res.message)
              }
          }, () => {
              this.$message.error('网络错误')
          })
        },
        getTypeList() {
            typeList({
                page: 1,
                pageSize: 10000
            }).then(res => {
                if (res.code === '000000') {
                    this.saveTypeList(res)
                }
            })
        },
        getCourseList(number) {
            const params = {
                page: number,
                pageSize: 10,
            }
            if (this.select_word !== '') {
                params.searchKey = this.select_word
            }
            courseList({ ...params }).then(res => {
                if (res.code === '000000') {
                    this.saveList({
                        ...res,
                        number
                    })
                } else {
                    this.$message.error(res.message)
                }
            }, () => {
                this.$message.error('网络错误')
            })
        },
        formatArea(row, col) {
            if (row.type == 1) {
                return '智库联盟'
            } else {
                return '智库机构'
            }
        },
        typeFormatter(row) {
            const types = this.types
            let type = '未知'
            types.some(item => {
                if (row.course_type_id === item.id) {
                    type = item.name
                    return true
                }
            })
            return type
        },
        timeFormatter(row) {
            return dateFormatter(row.publicAt)
        },
        formatType(row) {
            switch (row.organizationType) {
                case 1:
                    return '党政智库'
                case 2:
                    return '社科院智库'
                case 3:
                    return '党校（行政学院）智库'
                case 4:
                    return '省级专门智库'
                case 5:
                    return '省级改革智库'
                case 6:
                    return '高校智库'
                case 7:
                    return '社会智库'
            }
        },
        handleCurrentChange(val) {
            this.getCourseList(val)
        },
        delOrg(row) {
            console.log(row)
            this.$confirm('此操作将永久删除该机构, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let id = row.id
                deleteCourse({ ids: id })
                    .then(res => {
                        if (res.code === '000000') {
                            this.getCourseList(this.page.number)
                            this.$message.success('删除成功')
                        } else {
                            this.$message.error(res.message)
                        }
                    }, err => this.$message.error('服务器异常'))
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        add() {
            this.title = '新增课程'
            if (this.addForm.id) {
                this.$refs['addForm'].validate(valid => {
                    if (valid) {
                        updateCourse({ ...this.addForm })
                            .then(res => {
                                if (res.code === '000000') {
                                    this.dialogFormVisible = false
                                    this.$message.info('修改成功')
                                    this.getCourseList(this.page.number)
                                } else {
                                    this.$message.error(res.message)
                                }
                            }, err => this.$message.error('服务器异常'))
                    }
                })
            } else {
                this.$refs['addForm'].validate(valid => {
                    if (valid) {
                        addCourse({ ...this.addForm })
                            .then(res => {
                                if (res.code === '000000') {
                                    this.dialogFormVisible = false
                                    this.$message.success('添加成功')
                                    this.getCourseList(this.page.number)
                                } else {
                                    this.$message.error(res.message)
                                }
                            }, err => this.$message.error('服务器异常'))
                    }
                })
            }
        },
        addEx() {
            this.title = '新增课程'
            this.dialogFormVisible = true
            this.addForm = {}
            this.addForm.content = ''
        },
        editOrg(row) {
            this.dialogFormVisible = true
            this.title = '修改课程'
            this.addForm = filterObj(row)
            if (dateFormatter(row.publicAt)) {
                this.addForm.publicAt = dateFormatter(row.publicAt)
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 1%;
  .search {
    width: 30%;
  }
}

.block {
  text-align: center;
  margin-top: 1%;
}
</style>
